<div
  cdkOverlayOrigin
  #origin="cdkOverlayOrigin"
  #trigger
>
  <div *ngIf="apesShowInput">
    <input #input
           apes-input
           [attr.autoComplete]="'off'"
           [attr.placeholder]="showPlaceholder ? apesPlaceHolder : null"
           [attr.autofocus]="apesAutoFocus ? 'autofocus' : null"
           [readonly]="apesReadonly"
           [disabled]="apesDisabled"
           [ngClass]="inputCls"
           [(ngModel)]="inputValue"
           (blur)="handleInputBlur($event)"
           (focus)="handleInputFocus($event)"
           (change)="handlerInputChange($event)"
    >
    <i *ngIf="showClearIcon"
       apes-icon
       type="close-circle"
       apesTheme="fill"
       class="apes-cascader-picker-clear"
       [attr.title]="apesClearText"
       (click)="clearSelection($event)"></i>
    <i *ngIf="apesShowArrow && !isLoading"
       apes-icon apesType="down"
       [ngClass]="arrowCls"></i>
    <i *ngIf="isLoading"
       apes-icon apesType="loading"
       [ngClass]="loadingCls" class="apes-cascader-picker-arrow"></i>
    <span [ngClass]="labelCls">
          <ng-container *ngIf="!isLabelRenderTemplate; else labelTemplate">{{ labelRenderText }}</ng-container>
          <ng-template #labelTemplate>
            <ng-template [ngTemplateOutlet]="apesLabelRender"
                         [ngTemplateOutletContext]="labelRenderContext"></ng-template>
          </ng-template>
    </span>
  </div>
  <ng-content></ng-content>
</div>
<ng-template
  cdkConnectedOverlay
  cdkConnectedOverlayHasBackdrop
  [cdkConnectedOverlayOrigin]="origin"
  (backdropClick)="closeMenu()"
  (detach)="closeMenu()"
  (positionChange)="onPositionChange($event)"
  [cdkConnectedOverlayOpen]="menuVisible"
>
  <div #menu
       [ngClass]="menuCls" [ngStyle]="apesMenuStyle"
       style="width:375px;height: 300px;overflow: auto;"
       [apesNoAnimation]="noAnimation?.apesNoAnimation"
       [@slideMotion]="dropDownPosition"
       (mouseleave)="onTriggerMouseLeave($event)"
  >
    <apes-tabset [apesSelectedIndex]="index" (apesSelectChange)="selectChange($event)">
      <apes-tab apesTitle="省份" class="city-select-tab">
        <div class="city-select-content" style="width:320px">
          <div class="city-select province" style="display: block;">
            <dl *ngFor="let key of province_key" iclass="clearfix">
              <dt>{{key}}</dt>
              <dd>
                <a *ngFor="let option of provinces[key]" [class.active]="option.id== address.province"
                   (click)="onOptionClick('province',option,$event)">{{option.name}}</a>
              </dd>
            </dl>
          </div>
        </div>
      </apes-tab>
      <apes-tab *ngIf="includeArea('city')" apesTitle="城市" class="city-select-tab">
        <div class="city-select-content city-select city">
          <dl>
            <dd *ngIf="citys[address.province]">
              <a *ngFor="let option of  citys[address.province]" (click)="onOptionClick('city',option,$event)"
                 [class.active]="option.id==address.city">{{option.name}}</a>
            </dd>
          </dl>
        </div>
      </apes-tab>
      <apes-tab *ngIf="includeArea('district')" apesTitle="县区">
        <div class="city-select-content city-select city">
          <dl>
            <dd *ngIf="districts[address.city]">
              <a *ngFor="let option of districts[address.city]" (click)="onOptionClick('district',option,$event)"
                 [class.active]="option.id== address.district">{{option.name}}</a>
            </dd>
          </dl>
        </div>
      </apes-tab>
    </apes-tabset>
  </div>
</ng-template>
